<template>
    <quill-editor ref="myTextEditor" class="editorBox" :options='editorOption' v-model="data"
        :style="{ 'height': height + 'px', marginBottom: marginB + 'px' }" :disabled='disabled'></quill-editor>
</template>

<script>
import { Quill, quillEditor } from "vue-quill-editor";
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import quillConfig from './quillConfig';
import { getToken } from "@/utils/auth";
export default {
    components: {
        quillEditor
    },
    props: {
        value: String,//绑定的值，在组件上使用 v-model 绑定一个值
        // 高度设置
        height: {
            type: [Number, String],
            default: 240
        },
        // 下边距距离
        marginB: {
            type: [Number, String],
            default: 10
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    data() {
        return {
            data: '',//富文本绑定的值
            editorOption: quillConfig
        };
    },
    computed: {

    },
    created() {

    },
    watch: {
        value: {
            handler(newVal) {
                if (newVal) {
                    this.data = newVal;
                }
            },
            deep: true,
            immediate: true
        },
        data(newVal) {
            this.$emit('change', newVal)
        },
        disabled: {
            handler(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        var father = document.getElementsByClassName('editorBox')[0];
                        var children = document.getElementsByClassName('ql-toolbar')[0];
                        father.removeChild(children)
                    })
                }
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        //  自定义粘贴图片功能
        init() {
            let quill = this.$refs.myTextEditor.quill;
            quill.root.addEventListener('paste', evt => {
                if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
                    evt.preventDefault();
                    [].forEach.call(evt.clipboardData.files, file => {
                        if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                            return
                        }
                        this.uploadToServer(file)
                    })
                }
            }, false)
        },
        // 修改粘贴图片为上传到服务器
        uploadToServer(file) {
            const uploadConfig = {
                action: process.env.VUE_APP_BASE_API + "/common/upload", // 必填参数 图片上传地址
                methods: 'POST', // 必填参数 图片上传方式
                token: "Bearer " + getToken(), // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
                name: 'file', // 必填参数 文件的参数名
            };
            var xhr = new XMLHttpRequest()
            var formData = new FormData()
            formData.append(uploadConfig.name, file)
            xhr.open(uploadConfig.methods, uploadConfig.action, true);
            xhr.setRequestHeader("Authorization", uploadConfig.token);  //设置请求头
            xhr.send(formData)
            let quill = this.$refs.myTextEditor.quill;
            // 上传数据成功，会触发
            xhr.onload = function (res) {
                if (xhr.status === 200) {
                    var res = JSON.parse(xhr.responseText);
                    let length = quill.getSelection(true).index;
                    //这里很重要，你图片上传成功后，img的src需要在这里添加，res.path就是你服务器返回的图片链接。            
                    quill.insertEmbed(length, 'image', res.data);
                    quill.setSelection(length + 1)
                }
            };
            // 上传数据完成（成功或者失败）时会触发
            xhr.upload.onerror = function (e) {
                this.$message.error('图片上传失败');
            };
        },
    },
    mounted() {
        this.init();

        //修改富文本设置字体大小
        let fontSizeStyle = Quill.import('attributors/style/size') //引入这个后会把样式写在style上
        fontSizeStyle.whitelist = ['13px', '16px', '18px', '20px', '30px', '40px', '50px', '60px']
        Quill.register(fontSizeStyle, true)

        //设置字体样式
        let Font = Quill.import('attributors/style/font') //引入这个后会把样式写在style上
        let fonts = [false, 'Microsoft-YaHei', 'SimSun', 'SimHei', 'KaiTi', 'FangSong']
        Font.whitelist = fonts //将字体加入到白名单
        Quill.register(Font, true)
    },
};
</script>

<style scoped lang="scss">
.editorBox {
    width: 100%;
    display: flex;
    flex-direction: column;

    ::v-deep .ql-container {
        flex: 1 !important;
        overflow: hidden;
    }
}

/*
这里一定要写上，是用来把相关改变的配置在工具栏正常显示
如果不写，字体样式的下拉会重复显示Sans Serif，字体大小的下拉会重复显示Normal
*/

// .quill-editor ::v-deep .ql-container {
//   min-height: 150px;
// }
.quill-editor ::v-deep .ql-picker-label {
    line-height: 24px;
    vertical-align: 4px;
}

.quill-editor ::v-deep .ql-picker-options {
    max-height: 200px;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 3px;
        height: 5px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 10px;
    }

    &:hover {
        &::-webkit-scrollbar-thumb {
            background: rgb(68, 164, 202);
            border-radius: 10px;
        }
    }
}

.quill-editor ::v-deep .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.quill-editor ::v-deep .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
    content: "宋体";
    font-family: "SimSun" !important;
}

.quill-editor ::v-deep .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.quill-editor ::v-deep .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    content: "黑体";
    font-family: "SimHei";
}

.quill-editor ::v-deep .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.quill-editor ::v-deep .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑";
    font-family: "Microsoft YaHei";
}

.quill-editor ::v-deep .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.quill-editor ::v-deep .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体";
    font-family: "KaiTi" !important;
}

.quill-editor ::v-deep .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.quill-editor ::v-deep .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋";
    font-family: "FangSong";
}

.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="60px"]::before,
.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="60px"]::before {
    content: "一号";
}

.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="50px"]::before,
.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="50px"]::before {
    content: "二号";
}

.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
    content: "三号";
}

.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
    content: "四号";
}

.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "五号";
}

.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "六号";
}

.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "七号";
}

.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="13px"]::before,
.quill-editor ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="13px"]::before {
    content: "默认";
}
</style>